<template>
  <div>
    <div class="Search" v-if="Bsearch">
      <slot name="search"></slot>
      <div :style="{marginTop:status?15+'px':0,marginLeft:10+'px'}">
        <a-button type="primary" icon="search" @click="handleSubmit">查询</a-button>
        <a-button class="spacing" type="primary" icon="redo" @click="Reset">重置</a-button>
        <a class="spacing" @click="Change(status)">
          展开
          <a-icon v-if="!status" type="down"></a-icon>
          <a-icon v-else type="up"></a-icon>
        </a>
      </div>
    </div>
    <div class="Upload">
      <a-button type="primary" style="margin-right:15px" icon="plus" v-if="add" @click="Add">新增</a-button>
      <a-button
        type="primary"
        style="margin-right:15px"
        icon="upload"
        v-if="Bexport"
        @click="handleExport"
      >导出</a-button>
      <a-button type="primary" icon="download" v-if="Bimport" @click="handleImport">导入</a-button>
      <a-button
        v-if="selectedRowKeys.length>0"
        @click="BatchDelete"
        type="primary"
        icon="delete"
      >批量删除</a-button>
    </div>
    <a-alert v-if="batch" class="alertContainer" type="info">
      <div slot="description">
        <div class="alertInfo">
          <div>
            已选择
            <a>{{selectedRowKeys.length}}</a>项
          </div>
          <div class="empty">
            <a @click="emptySelect">清空</a>
          </div>
        </div>
      </div>
    </a-alert>
    <a-table
      :columns="columns"
      :rowKey="record => record.id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="ChangePage"
      :scroll="{ x:true }"
      :rowSelection="batch?{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}:null"
    >
      <span slot="action" slot-scope="text, record">
        <a href="javascript:;" class="ant-dropdown-link otherMore">
          <slot name="otherMore" :record="record"></slot>
          <!-- <a-popover arrowPointAtCenter :placement="'bottom'">
            <template slot="content">
              <slot name="more" :record="record"></slot>
            </template>
            <div class="more">
              更多
              <a-icon type="down" />
            </div>
          </a-popover>-->
          <a-dropdown v-if="more">
            <a class="ant-dropdown-link" href="#">
              更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item
                v-for="(item,index) in actions"
                :key="index"
                @click="SelectAction(item,record)"
              >
                <a href="javascript:;">{{item}}</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="是否删除?" @confirm="Delete(record)" okText="确定" cancelText="取消">
                  <a href="#">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
      </span>
    </a-table>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "ant-table"
})
export default class AntTable extends Vue {
  BatchDelete() {
    const _this = this;
    this.$confirm({
      title: "确定删除",
      content: "是否删除选中的数据?",
      okText: "确认",
      cancelText: "取消",
      onOk() {
        _this.SureDelete();
      }
    });
  }
  @Prop({ type: Array, required: false }) data!: any[]; //表格数据
  @Prop({
    type: Object,
    required: false,
    default: () => ({
      showQuickJumper: true,
      showSizeChanger: true,
      defaultCurrent: 1,
      defaultPageSize: 10,
      current: 1,
      showTotal: total => {
        return `共${total}条`;
      }
    })
  })
  pagination!: object; //分页
  @Prop({ type: Boolean, required: false, default: false }) loading!: boolean; //加载
  @Prop({
    type: Array,
    required: true,
    default: () => {
      return [];
    }
  })
  columns!: any[]; //表格格式
  @Prop({
    type: Array,
    default: () => {
      return [];
    }
  })
  selectedRowKeys!: string[]; //表格选中的数据集合
  @Prop({ type: Boolean, default: false }) status?: boolean; //默认隐藏的slot
  @Prop({ type: Boolean, default: false }) batch?: boolean; //是否显示批量删除
  @Prop({ type: Boolean, default: false }) Bsearch?: boolean; //是否显示搜索
  @Prop({ type: Boolean, default: false }) Bexport?: boolean; //是否显示导出
  @Prop({ type: Boolean, default: false }) Bimport?: boolean; //是否显示导入
  @Prop({ type: Boolean, default: false }) add?: boolean; //是否显示添加按钮
  @Prop({ type: Array, default: () => [] }) actions?: string[];
  @Prop({ type: Boolean, default: false }) more?: boolean;
  //展开变化
  @Emit("Change")
  Change(n: boolean) {}
  //查询
  @Emit("handleSubmit")
  handleSubmit() {}
  //重置
  @Emit("Reset")
  Reset() {}
  //表格数据选择
  @Emit("onSelectChange")
  onSelectChange(n: any[]) {}
  //导出
  @Emit("handleExport")
  handleExport() {}
  //导入
  @Emit("handleImport")
  handleImport() {}
  //分页改变
  @Emit("ChangePage")
  ChangePage() {}
  //清空选中的数据
  @Emit("emptySelect")
  emptySelect() {}
  //添加按钮
  @Emit("Add")
  Add() {}
  //批量删除
  @Emit("SureDelete")
  SureDelete() {}
  //更多选项选择值
  @Emit("SelectAction")
  SelectAction(title: string, record: any[]) {}
  //更多删除
  @Emit("Delete")
  Delete(record: any[]) {}
}
</script>
<style lang="less" scoped>
.Search {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
  .input {
    width: 200px;
    margin-left: 15px;
    margin-right: 15px;
  }
  .spacing {
    margin-left: 20px;
  }
}
.Upload {
  margin-bottom: 15px;
}
.alertContainer {
  display: flex;
  flex: 1;
  align-items: center;
  margin-bottom: 20px;
  height: 40px;
  padding: 0px;
  padding-left: 10px;
  .alertInfo {
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    .empty {
      margin-left: 30px;
    }
  }
}
.select {
  margin-left: 20px;
}
.selectOptions {
  margin-top: -20px;
}
.otherMore {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
}
.more {
  width: 50px;
}
</style>
